<template>
  <div>
    <a-card :bordered="false" >
      <div class="table-page-search-wrapper select-none" v-if="!fromSearchPath">
        <a-row :gutter="0" class="tagRow">
          <a-col :md="2" :sm="24">排序</a-col>
          <a-col :md="21" :sm="24">
            <a-col :md="3" :sm="24"><a class="sortTag current" :value="'-1'" @click="sort">收藏人数</a></a-col>
            <a-col :md="3" :sm="24"><a class="sortTag" :value="'-2'" @click="sort">歌曲数量</a></a-col>
            <a-col :md="3" :sm="24"><a class="sortTag" :value="'-3'" @click="sort">下载次数</a></a-col>
          </a-col>
        </a-row>
        <a-row :gutter="0" class="tagRow" v-for="(father, tagsIndex) in tags" :key="tagsIndex">
          <a-col :md="2" :sm="24">{{ father.tagName }}</a-col>
          <a-col :md="21" class="border" :sm="24">
            <a-col :md="3" :sm="24" v-for="(tag, index) in father.children" :key="index">
              <a :value="tag.tagId" @click="sort">{{ tag.tagName }}</a>
            </a-col>
          </a-col>
        </a-row>
      </div>
      <div style="display: flex; flex-wrap: wrap;">
        <div v-for="(item,index) in playlists" :key="index">
          <a-col :md="6" :sm="24">
            <a-card hoverable class="card" @mouseover="handleOver($event)" @mouseleave="handleLeave($event)">
              <img
                slot="cover"
                :src="preUrl + (item.imageUrl ? item.imageUrl : '周杰伦.jpg')"
                @click="goToPlaylistDetail(item)"
              />
              <a-card-meta :title="item.playlistName">
                <template slot="description">
                  <div class="ellipsis">{{ item.playlistInfo ? item.playlistInfo : '暂无简介' }}</div>
                  <div>收藏人数： {{ item.collectors }}</div>
                </template>
              </a-card-meta>
              <div style="float: right;visibility: hidden">
                <a-popconfirm
                  title="收藏该歌单？"
                  ok-text="是"
                  cancel-text="否"
                  v-if="item.isCollect === 0"
                  @confirm="collect(item)"
                >
                  <a-icon style="float: right" type="heart"/>
                </a-popconfirm>
                <a-popconfirm
                  title="取消收藏该歌单？"
                  ok-text="是"
                  cancel-text="否"
                  v-if="item.isCollect === 1"
                  @confirm="cancelCollect(item)"
                >
                  <a-icon style="float: right;color: red" type="heart"/>
                </a-popconfirm>
              </div>
            </a-card>
          </a-col>
        </div>
      </div>
      <a-pagination
        v-model="pageNo"
        :total="totalCount"
        :current="pageNo"
        :pageSize="pageSize"
        show-less-items
        style="margin-top: 15px;padding-right: 0;width: fit-content"
        :pageSizeOptions="pageSizeOptions"
        :showSizeChanger="true"
        :hideOnSinglePage="true"
        @change="listPlaylist"
        @showSizeChange="changePageSize"/>
    </a-card>
  </div>
</template>

<script>
  import { queryMusicSquareByUserId } from '@/api/music/playlist'
  import { addCollectionPlaylist, removePlaylistByUserId } from '@/api/music/collectionPlaylist'
  import { listAllTag } from '@/api/tag/tag'
  export default {
    props: {
      fromSearchPath: {
        type: Boolean,
        default () {
          return false
        }
      },
      text: {
        type: String,
        default () {
          return ''
        }
      }
    },
    data () {
      return {
        // 查询参数
        queryParam: {},
        pageNo: 1,
        pageSize: 8,
        totalCount: 0,
        pageSizeOptions: ['8', '16', '32'],
        playlists: [],
        tags: [],
        chooseSortTag: -1,
        chooseTags: [],
        sortTags: [],
        preUrl: '/api/file/download/image/'
      }
    },
    created () {
      this.queryParam.isSelf = '0'
      this.queryParam.playlistName = this.text
      this.queryParam.tagIds = '-1'
      this.listPlaylist()
      this.sortTags = window.document.getElementsByClassName('sortTag')
      listAllTag()
        .then(res => {
          if (res.data.message !== 'error') {
            this.tags = res.data.result
          } else {
            this.$message.error('查询标签失败！')
          }
        })
    },
    methods: {
      sort (e) {
        const tag = e.currentTarget
        const value = tag.attributes.value.value
        if (value < 0) {
          if (tag.classList.contains('current')) {
            return
          }
          for (let i = 0; i < this.sortTags.length; i++) {
            this.sortTags[i].classList.remove('current')
          }
          tag.classList.add('current')
          this.chooseSortTag = value
        } else {
          if (tag.classList.contains('current')) {
            const index = this.chooseTags.indexOf(value)
            this.chooseTags.splice(index, 1)
            tag.classList.remove('current')
          } else {
            if (this.chooseTags.length >= 3) {
              this.$message.warning('最多选择三个标签进行筛选！')
              return
            }
            this.chooseTags.push(value)
            tag.classList.add('current')
          }
        }
        this.queryParam.tagIds = [...this.chooseTags, this.chooseSortTag].join(',')
        this.listPlaylist()
      },
      changePageSize (current, size) {
        this.pageNo = current
        this.pageSize = size
        this.listPlaylist()
      },
      handleOver (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'visible'
      },
      handleLeave (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'hidden'
      },
      listPlaylist () {
        const reqParams = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
        queryMusicSquareByUserId(Object.assign(reqParams, queryJson))
          .then(res => {
            if (res.data.message !== 'error') {
              const count = res.data.result.totalCount
              if (this.fromSearchPath) {
                this.$emit('ok', count + ' 个歌单')
              }
              this.playlists = res.data.result.data
              this.totalCount = res.data.result.totalCount
            } else {
              this.$message.error('查询歌单失败！')
            }
          })
      },
      goToPlaylistDetail (record) {
        this.$router.push({ name: 'playlistDetail',
          params: record
        })
      },
      collect (playlist) {
        addCollectionPlaylist({ playlistId: playlist.playlistId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.$message.success('收藏成功！')
              this.listPlaylist()
            } else {
              this.$message.error('收藏失败！')
            }
          })
      },
      cancelCollect (playlist) {
        removePlaylistByUserId({ playlistId: playlist.playlistId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.$message.success('取消收藏成功！')
              this.listPlaylist()
            } else {
              this.$message.error('取消收藏失败！')
            }
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
  }
  .card {
    width: 200px;
    margin-right: 15px;
    margin-top: 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  img {
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .ant-card-meta-title {
    font-size: 14px !important;
  }
  ::v-deep .ant-card-meta-description {
    font-size: 13px !important;
  }
  ::v-deep .ant-card-body {
    padding: 12px 12px 15px;
  }
  .tagRow {
    font-size: 13px;
    .ant-col-md-2 {
      margin-top: 20px;
      border-radius: 16px 0 16px 16px;
      background-color: #7f7f8c;
      color: #fff;
      line-height: 28px;
      text-align: center;
      width: 80px;
    }
    .ant-col-md-21 {
      margin-top: 8px;
      margin-left: 45px;
    }
    .ant-col-md-3 {
      margin-top: 10px;
    }
    a {
      border-radius: 16px;
      display: inline-block;
      text-align: center;
      line-height: 28px;
      padding: 0 15px;
      color: #999999;
    }
    .border {
      border-top: solid 1px #eeeeee;
    }
    .current {
      background-color: #f7eae8;
      font-weight: 700;
      color: #ff5c38;
    }
  }
</style>
